import {
  MenuData,
  getAllMenus,
  addMenu,
  removeMenuById,
  updateMenuById,
  updateBulkMenu as updateBulkMenuApi
} from "@/api/menu"
import { getRoleAccessByRoles } from "@/api/roleAccess"
import {
  generateTree,
  ITreeItemDataWithMenuData
} from "@/utils/generateTree.ts"
export interface ITreeItemData extends MenuData {
  children?: ITreeItemDataWithMenuData[]
} //ITreeItemData 接口继承了 updateMenu 接口的所有属性；ITreeItemData 接口增加了一个可选的 children 属性
export interface IMenuState {
  menuList: MenuData[] //所有平级菜单
  menuTreeData: ITreeItemData[] //数级菜单
  authMenuList: MenuData[]
  authMenuTreeData: ITreeItemDataWithMenuData[]
}
export const useMenuStore = defineStore("menu", () => {
  const state = reactive<IMenuState>({
    menuList: [],
    menuTreeData: [],
    authMenuList: [], // 侧边菜单需要的
    authMenuTreeData: []
  })
  const getAllMenuList = async () => {
    // const res = await getAllMenus()
    const res = {
      code: 0,
      data: [
        {
          id: 1,
          name: "系统管理",
          title: "系统管理",
          icon: "el-icon-setting",
          path: "/system",
          sort_id: 1,
          parent_id: 0
        },
        {
          id: 2,
          name: "菜单管理",
          title: "菜单管理",
          icon: "el-icon-setting",
          path: "/menu",
          sort_id: 1,
          parent_id: 1
        },
        {
          id: 5,
          name: "菜单管理",
          title: "菜单管理",
          icon: "el-icon-setting",
          path: "/menu",
          sort_id: 1,
          parent_id: 0
        },
        {
          id: 3,
          name: "用户管理",
          title: "用户管理",
          icon: "el-icon-setting",
          path: "/user",
          sort_id: 2,
          parent_id: 1
        },
        {
          id: 4,
          name: "用户管理",
          title: "用户管理",
          icon: "el-icon-setting",
          path: "/guide",
          sort_id: 2,
          parent_id: 0
        }
      ]
    }
    if (res.code == 0) {
      const { data } = res
      state.menuList = data
      state.menuTreeData = generateTree(data)
    }
  }

  const appendMenu = async (data: ITreeItemData) => {
    const res = await addMenu(data)
    if (res.code == 0) {
      const node = { ...res.data }
      state.menuList.push(node)
      state.menuTreeData = generateTree(state.menuList)
      // 有的接口是添加完之后，直接更新列表即可
    }
  }

  const removeMenu = async (data: ITreeItemData) => {
    const res = await removeMenuById(data.id)
    if (res.code == 0) {
      const idx = state.menuList.findIndex((menu) => menu.id === data.id)
      state.menuList.splice(idx, 1)
      state.menuTreeData = generateTree(state.menuList)
    }
  }
  const updateMenu = async (data: Partial<MenuData>) => {
    await updateMenuById(Number(data.id), data)
    await getAllMenuList()
  }
  const updateBulkMenu = async () => {
    // 1.更新sortId
    state.menuTreeData.forEach((menu, idx) => (menu.sort_id = idx))
    // 2.删除子节点
    const menus = state.menuTreeData.map((menu) => {
      const temp = { ...menu }
      delete temp.children
      return temp
    })
    // 批量更新

    await updateBulkMenuApi(menus)
  }
  // 获取admin菜单
  const getAllMenuListByAdmin = async () => {
    const res = await getAllMenus()
    if (res.code == 0) {
      const { data } = res
      state.authMenuList = data
      state.authMenuTreeData = generateTree(data, true)
    }
  }
  // 根据角色获取菜单
  const getMenuListByRoles = async (roles: number[]) => {
    const res = await getRoleAccessByRoles(roles)
    if (res.code == 0) {
      const { data } = res
      const access = data.access as MenuData[]
      state.authMenuList = access
      state.authMenuTreeData = generateTree(access, true)
    }
  }

  return {
    state,
    getAllMenuList,
    appendMenu,
    removeMenu,
    updateBulkMenu,
    updateMenu,
    getAllMenuListByAdmin,
    getMenuListByRoles
  }
})
